---
title: Tagg
image: /images/user-guide/table-views/table.png
---

<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="Header" />
</Frame>

Komponent för att visuellt kategorisera eller märka innehåll.

<Tabs>

<Tab title="Usage">

```jsx
import { Tag } from "@/ui/display/tag/components/Tag";

export const MyComponent = () => {
  return (
    <Tag
      className
      color="red"
      text="Urgent"
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Egenskaper | Typ      | Beskrivning                                                                                                                                               |
| ---------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| klassNamn  | string   | Valfritt namn för ytterligare styling                                                                                                                     |
| färg       | string   | Färgen på taggen. Alternativ inkluderar: `grön`, `turkos`, `himmel`, `blå`, `lila`, `rosa`, `röd`, `orange`, `gul`, `grå` |
| text       | string   | Taggens innehåll                                                                                                                                          |
| onClick    | funktion | Valfri funktion som anropas när användaren klickar på taggen                                                                                              |

</Tab>

</Tabs>
